<template>


  <div class="div" style="border-radius: 10px;">
    <div class="div1">

      <div class="big_title_style">
        <span class="span1">实时数据</span>
        <span class="span2" >统计时间（{{currentTime}}）</span>

      </div>
      <!-- <el-col :span="4"> -->
        <div>
          <el-button size="mini" @click="refresh()">刷新</el-button>
        </div>
      <!-- </el-col> -->


    </div>
    <div class="div2 " >
      <div class="div3">
        <div>支付金额</div>
        <div class="div4">{{orderData.makeOrderMoneyTotal==null?0:orderData.makeOrderMoneyTotal}}</div>
        <div class="div5">昨天全天{{orderFormerly.makeOrderMoneyTotal==null?0:orderFormerly.makeOrderMoneyTotal}}</div>
      </div>
      <div class="div3 dd ">
        <div>支付买家数</div>
        <div class="div4">{{orderData.makeClientTotal==null?0:orderData.makeClientTotal}}</div>
        <div class="div5">昨天全天{{orderFormerly.makeClientTotal==null?0:orderFormerly.makeClientTotal}}</div>
      </div>
      <div class="div3 dd">
        <div>支付订单数</div>
        <div class=" div4">{{orderData.makeOrderTotal==null?0:orderData.makeOrderTotal}}</div>
        <div class="div5">昨天全天{{orderFormerly.makeOrderTotal==null?0:orderFormerly.makeOrderTotal}}</div>
      </div>
    </div>
  </div>


</template>

<script>
  import {
    getOrderCollect,getOrderAfterSaleCollect,getOrderTodayCollect
  } from '@/api/dataCentre/orderCount.js'
  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data() {
      //这里存数据
      return {
        //当前时间
        currentTime: '',
        //订单今日统计数据
        orderData:[],

        orderFormerly:[],
        // 查询参数
        queryParams: {
          //结束日期
          endTime: null ,
          //开始日期
          startTime: null
        },

      };
    },
    //计算属性
    computed: {},
    //监控data中数据变化
    watch: {},
    //方法
    methods: {
      refresh() {
        const date = new Date();
        var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ':' + date.getHours() + ':' + date.getMinutes()+ ':' + date.getSeconds()
        this.currentTime = time
        this.allData = true
        const start = new Date();
        this.queryParams.startTime =  start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
        this.queryParams.endTime =  start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
        this.getData(this.queryParams)
      },
      getData(queryParams){
        getOrderTodayCollect(queryParams).then((response) => {
          this.orderData = response.data
        })
         var day1 = new Date();
         day1.setTime(day1.getTime()-24*60*60*1000);
        var s1 = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-" + day1.getDate();

        this.queryParams.startTime =  s1
        this.queryParams.endTime =  s1
        getOrderTodayCollect(queryParams).then((response) => {
          this.orderFormerly = response.data
        })

      }
    },
    //声明周期 - 创建完成（可以访问当前this实例）
    created() {
      this.refresh()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() {
    },//生命周期 - 创建之前
    beforeMount() {
    },//生命周期 - 挂载之前
    beforeUpdate() {
    },//声明周期 - 更新之前
    updated() {
    },//生命周期 - 更新之后
    beforeDestroy() {
    },//生命周期 - 销毁之前
    destroyed() {
    },//生命周期 - 销毁之后
    activated() {
    },//缓存keep-alive
  }
</script>

<style scoped>
  body {
    background: #ecf0f3;
  }

  .div {
    background: #fff;
    margin: 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .div1 {
    display: flex;
    align-content: center;
    justify-content: space-between;
  }

  .span1 {
    font-size: 16px;
    font: 600;
    margin-right: 10px;

  }

  .span2 {
    border:1px;
    font-size: 14px;
    color: #606266;
    margin-top: 3px;
  }

  .div2 {
    padding: 20px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
  }

  .div3 {
    flex-basis: 25%;
    padding-bottom : 20px;
    padding-left: 30px;
  }

  .dd {
    border-left: 1px solid #dcdfe6;
  }

  .div4 {
    margin: 15px 0;
    padding-top: 5px;
    font-size: 20px;
    font: 600;
  }

  .div5 {
    color: #c0c4cc;
  }

  .first-title__title {
    font-size: 20px;
    font-weight: 500;
    color: #323234;
    margin-bottom: 7px;
  }

  /*.time_button {*/
  /*  margin-left: 1000px;*/
  /*}*/
  .div {
    background: #fff;
    margin: 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .mms-symc-card-item-new__wrapper{
    background: #f0f7ff;
    border: 1px solid #91bbff;
    border-top: 2px solid #407cff;
  }

</style>
